import {RightOutline} from 'antd-mobile-icons';
import './index.scss'
import LiteratureList from "../LiteratureList";
import ArticleInner from "../ArticleList";
import {useNavigate} from "react-router-dom";
import React from "react";

interface Props {
    data?: any,
    literatureData?: Array<any>,
    articleData?: Array<any>,
    //区域字典id
    id: string
}

const RegionInner = React.memo(({data = {}, literatureData = [], articleData = [], id}: Props) => {
    const n = useNavigate();
    return (
        <div className="region-inner-box">
            <div>
                <div onClick={() => n(`/region/${id}`)}>
                    <h2>{data?.name ?? '区域'}特色</h2>
                    <RightOutline/>
                </div>
                <div>
                    {
                        data?.images.map((v: { id: string, path: string }) => {
                            return (
                                <img src={v.path} alt="" key={v.id}/>

                            )
                        })
                    }
                </div>
            </div>
            <div>
                <h2>{data?.name ?? '区域'}文献</h2>
                <LiteratureList data={literatureData}/>
            </div>
            <div>
                <h2>{data?.name ?? '区域'}美文</h2>
                <ArticleInner data={articleData}/>
            </div>
        </div>
    )
})

export default RegionInner;